<template>
    <div>
        <vxe-tip status="primary">
            <code>
                <pre>
// 默认查询数据
defaultQueryData: {
    // form
    form: {
        shen: '510000', 
    },
    // 分页
    page: {
        pageSize: 100
    },
    // 其他查询参数
    params: {
        kdmc: '197325'
    }
}                    
                </pre>
            </code>
        </vxe-tip>
        <vxe-tip status="primary" title="动态设置查询参数">
            首先修改 defaultQueryData 中的参数，然后调用loadData方法即可。例如 市（shi）、区（qu） 两个参数的赋值
        </vxe-tip>
        <y-table ref="tableRef" v-bind="listOptions"></y-table>
    </div>
</template>

<script>
import { getTableData } from '@/api/table'

export default {
    data() {
        return {
            listOptions: {
                // 获取数据方法
                dataMethod: getTableData,
                // 默认查询数据
                defaultQueryData: {
                    // form
                    form: {
                        shen: '510000',
                    },
                    // 分页
                    page: {
                        pageSize: 100
                    },
                    // 其他查询参数
                    params: {
                        kdmc: '197325'
                    }
                },
                // 表单配置
                formOptions: {
                    items: [
                        {
                            field: 'shen',
                            title: '省',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '四川省', value: '510000' },
                                    { label: '青海省', value: '630000' }
                                ],
                            }
                        },
                        {
                            field: 'shi',
                            title: '市',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        },
                        {
                            field: 'qu',
                            title: '区',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        }
                    ]
                },
                // 表格配置
                tableOptions: {
                    height: '',
                    // 表格列
                    columns: [
                        { type: 'seq', width: 70 },
                        { field: 'kdmc', title: '考点名称' },
                        { field: 'xm', title: '姓名' },
                        { field: 'xb', title: '性别' },
                        { field: 'createTime', title: '时间' }
                    ],
                }
            }

        }
    },
    async mounted() {

        // 动态设置查询参数
        await this.setFormQuery();

        this.$refs.tableRef.loadData()
    },
    methods: {
        async setFormQuery() {

            this.listOptions.defaultQueryData.form.shi = '510104'
            this.listOptions.defaultQueryData.form.qu = '510104'
        }
    }
}
</script>

<style lang="scss" scoped></style>